<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:cc="http://java.sun.com/jsf/composite/composite">
<ui:composition>
    <h:panelGrid columns="2" styleClass="editPropsTable" columnClasses="editPropsCol1,editPropsCol2"
                 footerClass="editPropsFooter">
        <h:outputLabel for="#{lineMode}Color" value="Color"/>
        <cc:colorPicker id="#{lineMode}Color" type="#{lineMode}"/>
        <h:outputLabel for="#{lineMode}Width" value="Line width"/>
        <p:spinner id="#{lineMode}Width" min="1" max="100" maxlength="3"
                   onchange="sendPropertiesChanges('#{lineMode}', true)"/>
        <h:outputLabel for="#{lineMode}Style" value="Line style"/>
        <h:selectOneMenu id="#{lineMode}Style" style="font-weight: bold; width: 60px;"
                         onchange="sendPropertiesChanges('#{lineMode}')">
            <f:selectItems value="#{displayWhiteboard.lineStyles}"/>
        </h:selectOneMenu>
        <h:outputLabel for="#{lineMode}Opacity" value="Opacity"/>
        <p:spinner id="#{lineMode}Opacity" min="0" max="1" maxlength="1" stepFactor="0.1"
                   onchange="sendPropertiesChanges('#{lineMode}')"/>
        <h:outputLabel for="#{lineMode}Rotation" value="Rotate (0-360&deg;)"/>
        <p:spinner id="#{lineMode}Rotation" min="0" max="360" maxlength="3"
                   onchange="sendPropertiesChanges('#{lineMode}', false, true)"/>
        <ui:include src="/sections/defbutton.xhtml">
            <ui:param name="properties" value="#{lineMode}"/>
        </ui:include>
    </h:panelGrid>
</ui:composition>
</html>
